import React, { Component } from "react";
/* 1. 引入路由需要的组件  HashRouter Route Link */
import { HashRouter as Router, Route, Link } from "react-router-dom";

/* 3. 新建一个登录界面的组件 */
function Login(props) {
  console.log(props);
  return (
    <div>
      {/* 5. 添加路由的跳转事件 */}
      <button
        onClick={() => {
          props.history.push("/home");
        }}
      >
        登录
      </button>
    </div>
  );
}
/* 7. 添加一个 Home 组件 */
function Home(props) {
  return (
    <div>
      <h1>主页</h1>
      <button
        onClick={() => {
          props.history.go(-1);
          // props.history.go(-100); 如果记录超过历史记录 默默失败
        }}
      >
        返回上一页
      </button>
    </div>
  );
}
export default class App extends Component {
  render() {
    /* 2. 将Router 作为根节点 */
    return (
      <Router>
        {/* 4. 配置根默认的路由规则 / => Login */}
        <Route path="/" exact component={Login}></Route>
        {/* 6. 添加 /home 路径对应规则 */}
        <Route path="/home" component={Home}></Route>
      </Router>
    );
  }
}
